<template>
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        设备管理
        <small>设备列表与在线管理</small>
      </h1>
    </section>

    <!-- Main content -->
    <section class="content devices-manage">
      <div class="row">
        <div class="col-lg-8 col-md-6 col-sm-12 col-xs-12">
          <div class="box box-info">
            <div class="box-header with-border">
              <h3 class="box-title">设备列表</h3>
              <div class="box-tools pull-right">
                <div class="form-inline">
                  <div class="form-group">
                    <label for="select_app">选择目标应用</label>
                    <select class="form-control" v-model="watchapp" @change="app_selected">
                      <option value="0">全部</option>
                      <option v-for="appitem in apps" v-bind:value="appitem.appid" :key="appitem.appid">{{appitem.name}}</option>
                    </select>
                  </div>
                </div>
              </div>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <table class="table table-hover table-responsive">
                <thead>
                  <tr>
                    <th>设备序列号</th>
                    <th>设备名</th>
                    <th>最后存活时间</th>
                    <th>所属应用</th>
                    <th>设备管理</th>
                  </tr>
                </thead>
                <tbody>
  
                  <tr v-for="item in data" :key="item.devid">
                    <td>
                      <router-link :to="{name: 'DeviceDetail', params: {devid: item.devid}}">{{item.dev_serial}}</router-link>
                    </td>
                    <td>{{item.name}}</td>
                    <td>{{item.latest}}</td>
                    <td>{{apps[item.appid].name}}</td>
                    <td>
                      <a href="javascript:;" @click="remove_device(item.devid)">
                        <i class="fa fa-fw fa-remove"></i> 删除</a>
                    </td>
                  </tr>
                  <tr v-if="data.length === 0">
                    <td colspan="6">暂空</td>
                  </tr>
  
                </tbody>
              </table>
            </div>
          </div>
        </div>

        <!-- left column -->
        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
          <!-- general form elements -->
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">新设备注册</h3>
            </div>
            <!-- /.box-header -->
            <!-- form start -->
            <form role="form">
              <div class="box-body">
                <div class="form-group">
                  <label for="devnameinput">命名设备</label>
                  <input type="text" class="form-control" id="devnameinput" placeholder="设备备注名称" v-model="newdevname">
                </div>
                <div class="form-group">
                  <label for="devserialinput">设备序列号</label>
                  <input type="text" class="form-control" id="devserialinput" placeholder="模组IMEI" v-model="newdevserial">
                </div>
                <div class="form-group">
                  <label for="categoryselect">设备从属应用</label>
                  <select class="form-control" v-model="newdevapp">
                    <option v-for="appitem in apps" v-bind:value="appitem.appid" :key="appitem.appid">{{appitem.name}}</option>
                  </select>
                </div>
              </div>
              <div class="box-footer">
                <button type="submit" @click="device_register" class="btn btn-primary">提交注册</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
</template>

<script>
import { mapState, mapGetters } from 'vuex';
var _ = require("lodash");

export default {
  name: 'Devices',
  data: function () {
    return {
      newdevserial: '',
      newdevapp: '',
      newdevname: '',
      watchapp: 0,  //默认取全部
    };
  },
  computed: {
    ...mapState({
      data: state => state.devices.data
    }),
    ...mapGetters([
      'apps',
    ]),
  },
  methods: {
    reset_add_form() {
      this.newdevserial = ''
      this.newdevapp = '';
      this.newdevname = '';
    },
    device_register() {
      let args = {
        devserial: this.newdevserial,
        appid: this.newdevapp,
        name: this.newdevname,
      };
      let req = this.$store.dispatch('add_device', args);
      req.then(response => {
        this.reset_add_form();
      }).catch(err => {
        console.error('device register failed.');
      });
    },
    remove_device(devid) {
      this.$store.dispatch('remove_device', devid);
    },
    app_selected() {
      console.log('select changed?');
      console.info(this.watchapp);
    }
  },
  created() {
    document.title = "设备管理";
    if (_.keys(this.apps).length === 0) {
      this.$store.dispatch('load_apps');
    }
    this.$store.dispatch('load_devices');
  }
}
</script>
